<template >
  <div class="goodsitem" @click="itemClick">
    <img v-lazy="showImage" alt="" @load="imageLoad" />
    <div class="title">
      {{ goodsItem.title }}
    </div>
    <div class="span-style">
      <span class="price"> {{ goodsItem.price }} </span>
      <span class="cfav"> {{ goodsItem.cfav }} </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsListItem",
  props: {
    goodsItem: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    showImage() {
      return this.goodsItem.image || this.goodsItem.show.img;
    },
  },
  methods: {
    imageLoad() {
     this.$bus.$emit("imageItemLoad");
    },
    itemClick() {
      this.$router.push("/detail/" + this.goodsItem.iid);
    },
  },
};
</script>

<style scoped>
.goodsitem {
  width: 100%;
  padding: 4px;
}
.goodsitem img {
  width: 100%;
  border-radius: 6px;
}
.title {
  padding: 2px 5px;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.span-style {
  text-align: center;
  font-size: 16px;
}
.span-style .price {
  color: var(--color-tint);
}
.span-style .cfav::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("~assets/image/common/collect.png");
  background-size: 14px 14px;
}
</style>